<template>
  <div class="container">
    <Breadcrumb
      :items="[
        $t('menu.production'),
        $t('menu.version.management'),
        '分类钣金版本',
      ]"
    />
    <div style="margin: 20px 0"
      ><a-button type="primary" disabled style="margin-right: 20px"
        >选择版本序列</a-button
      >
      <a-tree-select
        :data="treeData"
        placeholder="Please select ..."
        style="width: 300px"
        :fieldNames="{
          key: 'id',
          title: 'cat_name',
          children: 'son',
        }"
        @change="changeTableList"
      ></a-tree-select>
      <a-button type="primary" style="margin: 0 20px" @click="add"
        >分类钣金版本新增</a-button
      >
    </div>

    <a-table :columns="columns" :data="data">
      <template #optional="{ record }">
        <a-popconfirm
          :content="`此操作将永久删除, 是否继续?`"
          type="warning"
          @ok="delItem(record)"
        >
          <a-button type="text" size="small" status="danger">
            <template #icon>
              <icon-delete />
            </template>
            删除
          </a-button>
        </a-popconfirm>
      </template>
    </a-table>

    <a-drawer
      :visible="visible"
      @ok="handleOk"
      title="新增钣金版本"
      :width="500"
      @cancel="handleCancel"
      unmountOnClose
    >
      <a-form-item label="选择二级分类">
        <a-tree-select
          :data="treeData"
          placeholder="Please select ..."
          style="width: 300px"
          :fieldNames="{
            key: 'id',
            title: 'cat_name',
            children: 'son',
          }"
          @change="add_changeTableList"
        ></a-tree-select>
      </a-form-item>

      <a-form-item label="版本号">
        <a-input
          v-model="version"
          placeholder="please enter your version..."
          @change="versionChange"
        />
      </a-form-item>
      <a-form-item label="上传图纸">
        <a-upload
          action="/admin/cat_plate_version/add"
          @change="uploadChange"
          multiple
          :limit="1"
          @success="onSuccess"
        />
      </a-form-item>
    </a-drawer>
  </div>
</template>

<script lang="ts" setup>
  import { productTree } from '@/api/production';
  import { getProList, delProList, addPro } from '@/api/api/production';
  import { onMounted, ref } from 'vue';

  import { Message } from '@arco-design/web-vue';

  import { getToken } from '@/utils/auth';
  onMounted(() => {
    getProductTree();
  });

  const treeData = ref();
  const getProductTree = () => {
    productTree().then((res: any) => {
      if (res.code === 200) {
        console.log(res);

        treeData.value = renderTreeData(res.data);
      }
    });
  };

  const renderTreeData = (i) => {
    const array = [];
    i.map((v) => {
      v.id = v.id.toString();
      if (v.son && v.son.length > 0) {
        for (let key of v.son) {
          key.id = v.id + key.id;
        }
        array.push(v);
      }
    });

    return array;
  };
  const cat_id = ref();
  const cat_second_id = ref();

  const changeTableList = (e) => {
    console.log(e);

    cat_id.value = e.slice(0, 1);

    cat_second_id.value = e.slice(1);
    console.log(cat_id.value);

    console.log(cat_second_id.value);

    getProListHandler(cat_id.value, cat_second_id.value);
  };

  const getProListHandler = (cat_id, cat_second_id) => {
    getProList(cat_id, cat_second_id).then((res: any) => {
      if (res.code === 200) {
        console.log(res.data.data);

        data.value = res.data.data;
      }
    });
  };

  const data = ref<any>();
  const columns = [
    {
      title: '主键id',
      dataIndex: 'id',
      align: 'center',
    },
    {
      title: '一级产品分类id',
      dataIndex: 'cat_id',
      align: 'center',
    },
    {
      title: '一级分类名称',
      dataIndex: 'cat_name',
      align: 'center',
    },
    {
      title: '二级产品分类id',
      dataIndex: 'cat_second_id',
      align: 'center',
    },
    {
      title: '二级分类名称',
      dataIndex: 'cat_second_name',
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      align: 'center',
    },

    {
      title: '图纸url',
      dataIndex: 'blueprint',
      align: 'center',
    },
    {
      title: '版本名称',
      dataIndex: 'version',
      align: 'center',
    },
    { title: '操作', slotName: 'optional', align: 'center' },
  ];

  const delItem = (record) => {
    delProList({ id: record.id }).then((res: any) => {
      console.log(res);
      if (res.code === 200) {
        Message.success('删除成功');

        getProListHandler(cat_id.value, cat_second_id.value);
      }
    });
  };

  const visible = ref(false);

  const handleCancel = () => {
    visible.value = false;
  };
  const add = () => {
    visible.value = true;
  };

  const version = ref();
  const versionChange = (e) => {
    version.value = e;
  };

  const token = {
    token: getToken(),
  };
  const blueprint = ref();

  const uploadChange = (e) => {
    console.log(e[0].file);
    blueprint.value = e[0].file;
  };

  const onSuccess = (fileList) => {};
  const handleOk = () => {
    console.log(blueprint.value);

    const msg = {
      cat_second_id: cat_second_id.value,
      version: version.value,
      blueprint: blueprint.value,
    };
    const formData = new FormData();

    formData.append('blueprint', blueprint.value);
    formData.append('version', version.value);
    formData.append('cat_second_id', cat_second_id.value);

    addPro(formData).then((res: any) => {
      console.log(res);
      if (res.code === 200) {
        Message.success('添加成功');
        const msg = {
          cat_id: cat_id.value,
          cat_second_id: cat_second_id.value,
        };
        getProListHandler(cat_id.value, cat_second_id.value);
        version.value = '';
      } else {
        version.value = '';
        Message.error(res.msg);
      }
    });
    visible.value = false;
  };

  const add_changeTableList = (e) => {
    cat_id.value = e.slice(0, 1); 
    cat_second_id.value = e.slice(1);
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }
</style>
